<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true"
      >增加供应商</el-button
    >
    <el-input
      v-model="shousuo"
      placeholder="请输入筛选条件"
      id="el-shousuo"
      style="display: inline"
    ></el-input>
    <el-button icon="el-icon-search" @click="shousuo1()"></el-button>
    <el-dialog
      title="新增供应商"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row :gutter="20">
          <el-col :span="8"
            ><el-form-item label="供应商编码" prop="coding">
              <el-input v-model="ruleForm.coding"></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8"
            ><el-form-item label="供应商名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人" prop="contact">
              <el-input v-model="ruleForm.contact"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话" prop="phone">
              <el-input
                v-model.number="ruleForm.phone"
                ref="ruleForm.phone"
                @input="limitOrder"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="14">
            <el-form-item label="供应商地址" prop="address">
              <el-input v-model="ruleForm.address"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10"
            ><el-form-item label="传真" prop="straight">
              <el-input v-model="ruleForm.straight"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="14"
            ><el-form-item label="银行资料" prop="bank">
              <el-input
                v-model="ruleForm.bank"
                oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                maxlength="19"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="10"
            ><el-form-item label="邮件地址" prop="site">
              <el-input v-model="ruleForm.site"></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-form-item label="备注信息" prop="remark">
          <el-input type="textarea" v-model="ruleForm.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即添加</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button
            @click="
              dialogVisible = false
              resetForm('ruleForm')
            "
            >取 消</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>

export default {
  name: 'Newtable',
  props: ['tableData'],
  data() {
    return {
      shousuo: '',
      dialogVisible: false,
      ableData: {},
      ruleForm: {
        coding: '',
        name: '',
        contact: '',
        phone: '',
        address: '',
        straight: '',
        bank: '',
        site: '',
        remark: '',
      },
      //表单规则
      rules: {
        coding: [
          { required: true, message: '请输入供应商编码', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入供应商名称', trigger: 'blur' },
          { max: 20, message: '长度在 20个字符内', trigger: 'blur' },
        ],
        contact: [
          {
            required: true,
            message: '请输入联系人',
            trigger: 'blur',
          },
        ],
        phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
        address: [
          {
            required: true,
            message: '请输入地址',
            trigger: 'blur',
          },
        ],
        straight: [{ required: true, message: '请输入传真', trigger: 'blur' }],
        bank: [{ required: true, message: '请填写银行资料', trigger: 'blur' }],
        site: [
          { required: true, message: '请填写emali资料', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change'],
          },
        ],
      },
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done()
        })
        .catch(() => {})
    },
    limitOrder() {
      // 电话号码长度限制
      console.log(this.ruleForm.phone)
      let lsz_str = String(this.ruleForm.phone)
      if (lsz_str.length > 11) {
        lsz_str = lsz_str.substr(0, lsz_str.length - 1)
        console.log(lsz_str.length)
        this.ruleForm.phone = Number(lsz_str)
      }
    },
    //表单提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = this.ruleForm
          this.$axios
            .post('/supply/inSupply', data)
            .then((res) => {
              console.log(res) 
              alert('成功添加')
          this.dialogVisible = false
          this.resetForm('ruleForm')
             this.$emit('fatherMethod');
            })
            .catch((err) => {
              console.log(err)
            })
         
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    //搜索
    shousuo1(){
      this.$emit('fatherMethod2');
        let data=new Object();
        data.name=this.shousuo;
        data.page='1'
        data.size=this.$parent.pagesi
        console.log(this.$parent.pagesi)
        this.$axios
        .post('/supply/selectLikeNamePage', data
          
        )
        .then((res) => {
          console.log(res)
          this.$parent.tableData=res.data.data
          this.$parent.total=res.data.count        
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
}
</script>